<template>
  <div class="recode-main">
    <div v-if="isNull" class="null-text">暂无播放记录!!!</div>
    <div class="button" v-if="!isNull">
      <el-button plain @click="delMessage">删除全部记录</el-button>
    </div>
    <div>
      <el-timeline>
        <el-timeline-item
          v-for="item in recodeList"
          :key="item.id"
          :timestamp="dateFormat(item.gmtModified)"
          placement="top"
          color="hsv"
          type="primary "
        >
          <el-card>
            <div class="card">
              <div class="left">
                <router-link :to="'/videoDetail/' + item.videoId">
                  <el-image
                    style="width: 180px; height: 120px; border-radius: 8px"
                    :src="item.coverUrl"
                    fit="fill"
                  />
                </router-link>
              </div>

              <div class="right">
                <div class="text">
                  {{ item.videoTitle }}
                </div>
                <div class="right-footer">
                  <div>
                    <span v-if="item.type === 0">动漫</span>
                    <span v-if="item.type === 1">娱乐</span>
                    <span v-if="item.type === 2">科技</span>
                  </div>
                  <div class="author">
                    <el-image
                      :src="item.avatarUrl"
                      style="width: 25px; height: 25px; border-radius: 50%"
                      fit="fill"
                    ></el-image>
                    <span class="hr"></span> {{ item.nickName }}
                  </div>
                  <a href="#">
                    <span @click="delRecode(item.id)">
                      <svg
                        t="1652952507138"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="3012"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0"
                          p-id="3013"
                        ></path>
                        <path
                          d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0"
                          p-id="3014"
                        ></path>
                        <path
                          d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0"
                          p-id="3015"
                        ></path>
                      </svg>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import UserApi from '@/api/core/User'
import moment from 'moment'
export default {
  name: 'UserRecode',
  data() {
    return {
      recodeList: [],
      isNull: false,
    }
  },

  created() {
    this.getPlayRecode()
  },

  methods: {
    //获取记录
    getPlayRecode() {
      UserApi.getPlayRecode()
        .then((response) => {
          this.recodeList = response.data.playRecordsDetail
          if (this.recodeList.length === 0) {
            this.isNull = true
          }
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //删除记录
    delRecode(id) {
      UserApi.delRecode(id)
        .then(() => {
          this.getPlayRecode()
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //删除信息消息提示
    delMessage() {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.delAllRecode()
      })
    },

    //删除全部记录
    delAllRecode() {
      UserApi.delAllRecode()
        .then(this.getPlayRecode())
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //格式化时间
    dateFormat(data) {
      return moment(data).format('YYYY-MM-DD HH:mm:ss')
    },
  },
}
</script>

<style scoped>
.recode-main {
  margin-left: 20px;
  width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.recode-main .null-text {
  margin-left: 100px;
  margin-top: 100px;
  color: burlywood;
  font-size: 30px;
}
.recode-main .button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.card {
  width: 800px;
  display: flex;
}

.card .right {
  margin-left: 20px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right .text {
  font-weight: bold;
}

.right .right-footer {
  width: 550px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #99a2aa;
  font-size: 12px;
}

.right .right-footer .author {
  display: flex;
  align-items: center;
}
.hr {
  height: 18px;
  background-color: #dee5db;
  border: 1px solid #efeffe;
  margin-right: 4px;
  margin-left: 2px;
}
</style>
